<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 父组件的模板 -->
		<div id="app">
			<!-- 监听子组件的事件监听到了就调用cpnClick -->
			<cpn @item-click="cpnClick"></cpn>
		</div>
		
	</body>
	<!-- 子组件的模板 -->
	<template id="cpn">
		<div>
			<button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
		</div>
	</template>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 1.子组件
		const cpn = {
			template: '#cpn',
			data(){
				return {
					categories:[
						{id:1,name:'热门推荐'},
						{id:2,name:'生活用品'},
						{id:3,name:'中秋月饼'},
						{id:4,name:'家居好物'},
					]
				}
			},
			methods:{
				btnclick(item){
					// console.log(item);
					// 组件的emit参数有 父组件监听的函数名,要传递给父组件的参数
					// 不要用大写写法,用间隔写法即可
					this.$emit('item-click',item);
				}
			}
		}
		// 2.父组件
		const app = new Vue({
			el : "#app",
			data:{
				
			},
			components:{
				cpn
			},
			methods:{
				cpnClick(item){
					console.log('父',item);
				}
			}
		})
	</script>
</html>
